<template>
  <qc-page-table
    ref="noticePageTableRef"
    :columns="columns"
    :loadData="loadData"
    :rowKey="(record) => record[primaryKey]"
  >
    <template #toolbarTitle>
      {{ t('org.notice.noticeTableTitle') }}
    </template>
    <template #toolbarButton>
      <a-input-search
        :placeholder="t('org.notice.title')"
        v-model:value="queryParam.title"
        @search="searchTable"
      ></a-input-search>
      <qc-add-button @click="addButtonClick"></qc-add-button>
      <qc-delete-button @click="deleteButtonClick"></qc-delete-button>
    </template>
    <template #customNoticeId="{ text, record }">
      <span class="qc-link" @click="editButtonClick(record)">
        {{ text }}
      </span>
    </template>
    <template #customType="{ text, record }">
      <a-tag :color="text == 'NOTICE' ? '#87d068' : '#f50'">
        {{ record.typeDesc }}
      </a-tag>
    </template>
    <template #customStatus="{ text }">
      <a-tag :color="text ? '#87d068' : '#f50'">
        {{ text ? t('org.notice.statusTrue') : t('org.notice.statusFalse') }}
      </a-tag>
    </template>
  </qc-page-table>
  <a-modal v-if="showModal" v-model:visible="showModal" @ok="handleOk" @cancel="handleCancel">
    <template #title> {{ modalTitle }} </template>
    <notice-form ref="noticePageFormRef" :noticeId="currentNoticeId" @submit-success="submitSuccess"></notice-form>
  </a-modal>
</template>
<script lang='ts'>
import { defineComponent, onMounted, reactive, ref, toRefs } from 'vue'
import { useI18n } from 'vue-i18n'
import noticeApi from '/@/api/org/notice'
import { noticeTableColumns, noticeQueryColumns, noticeEditUrl } from '../interface'
import NoticeForm from './notice-form.vue'
import { useModelPageTable } from '/@/kit/model-kit'
export default defineComponent({
  name: 'NoticeList',
  components: { NoticeForm },
  setup(props) {
    const { t } = useI18n()
    const noticePageTableRef = ref()
    const noticePageFormRef = ref()
    const queryParam = {}
    const { primaryKey, searchTable, reloadTable, loadData, deleteSelectData } = useModelPageTable(
      noticePageTableRef,
      noticeApi,
      queryParam
    )
    const noticeState = reactive({
      noticeEditUrl,
      columns: noticeTableColumns,
      primaryKey,
      search: () => reloadTable(),
      queryColumns: noticeQueryColumns,
      queryParam,
      loadData,
      addButtonClick: () => {
        noticeState.showModal = true
        noticeState.modalTitle = t('org.notice.addNoticeTitle')
      },
      editButtonClick: (item: any) => {
        noticeState.showModal = true
        noticeState.modalTitle = t('org.notice.editNoticeTitle')
        noticeState.currentNoticeId = item.noticeId
      },
      deleteButtonClick: () => deleteSelectData(),
      ////////弹窗
      showModal: false,
      modalTitle: null,
      currentNoticeId: null,
      handleOk: () => noticePageFormRef.value.onSubmit(),
      handleCancel: () => {
        noticeState.currentNoticeId = null
      },
      submitSuccess: () => {
        noticeState.showModal = false
        noticeState.currentNoticeId = null
        reloadTable()
      },
    })
    onMounted(() => searchTable())
    return {
      t,
      noticePageTableRef,
      noticePageFormRef,
      ...toRefs(noticeState),
      searchTable,
    }
  },
})
</script>